<template>
  <div class="jurisdiction">
    <div class="table">
      <div class="head">
      <el-tag style="height: 40px;font-size: 16px;line-height: 40px">用户权限表</el-tag>
      <div>
      角色: <el-select v-model="value" clearable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-input
    placeholder="请输入关键字"
    suffix-icon="el-icon-search"
    v-model="input"
    style="width: 220px"> 
  </el-input>
  <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加</el-button>
  </div>
    </div>
    <el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    :data="searchMan.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    height="600px"
    stripe
    style="width: 100%"
    >
    <el-table-column width="50" label="ID" align="center">
      <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span></template>
    </el-table-column>
    <el-table-column prop="number" label="工号" align="center"></el-table-column>
    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
    <el-table-column prop="password" label="密码" align="center"></el-table-column>
    <el-table-column prop="role" label="角色" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button type="text" @click="handleclickdelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=currentPage
      :page-sizes="[10]"
      :page-size=pagesize
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total=list.length
      style="margin-top: 20px;float: right">
    </el-pagination>
    </div>
    <el-dialog title="添加用户权限表" :visible.sync="dialogFormVisible" width="500px">
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="工号" prop="number" :label-width="formLabelWidth">
      <el-input v-model="form.number" clearable></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
      <el-input v-model="form.name" clearable></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
      <el-input v-model="form.password" show-password></el-input>
    </el-form-item>
    <el-form-item label="联系方式" prop="phone" :label-width="formLabelWidth">
      <el-input v-model="form.phone" clearable></el-input>
    </el-form-item>
    <el-form-item label="角色" prop="role" :label-width="formLabelWidth">
      <el-select v-model="form.role" placeholder="请选择角色权限">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
      </el-select>
    </el-form-item>
    <el-form-item style="margin-left: 120px">
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      <el-button @click="dialogFormVisible = false">取 消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>
  </div>
</template>

<script>
import { getRolers, addRoler, removeRoler } from '@/api/roler'
export default {
  name: 'Jurisdiction',
  data () {
    return {
      options: [{
        value: '录入人员A1',
        label: 'A1'
      }, {
        value: '处理人员A2',
        label: 'A2'
      }, {
        value: '验查人员A3',
        label: 'A3'
      }, {
        value: '技术人员B1',
        label: 'B1'
      }, {
        value: '客户信息B2',
        label: 'B2'
      }, {
        value: '用户权限B3',
        label: 'B3'
      }, {
        value: '超级管理员all',
        label: 'all'
      }], // 筛选角色数据
      list: '', // 列表数据
      data: '', // 储存列表数据
      form: {}, // 表单数据
      rules: {
        number: [{ required: true, message: '请输入工号', trigger: 'blur' }],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择用户权限', trigger: 'blur' }
        ]
      }, // 表单验证规则
      value: '',
      input: '',
      loading: true,
      dialogFormVisible: false, // 表单弹窗
      formLabelWidth: '120px',
      pagesize: 10, // 分页每页数据数
      currentPage: 1 // 当前页数
    }
  },
  mounted () {
    this.getdata()
  },
  watch: {
    /* input (input) {
      this.searchMan(input)
    } */
  },
  computed: {
    searchMan () {
      var value = this.input
      var select = this.value
      if (value && select) {
        var list = this.list.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().match(value)
          })
        })
        return list.filter(item => {
          return item.role === select
        })
      }
      if (value) {
        return this.list.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().match(value)
          })
        })
      } else if (select) {
        return this.list.filter(item => {
          return item.role === select
        })
      }
      return this.list
    }
  },
  methods: {
    /* searchMan (value) {
      this.list = this.data.filter(data => {
        return Object.keys(data).some(key => {
          return String(data[key]).toLowerCase().match(value)
        })
      })
      console.log(this.list)
    }, */
    getdata () {
      let data = async () => {
        try {
          let result = await getRolers()
          if (result) {
            this.list = result
            this.loading=false
          }
        } catch (err) {
          console.log(err)
        }
      }
      data()
    },
    handleSizeChange (size) {
      this.pagesize = size
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
    },
    /* filterMethod (value) {
      this.list = this.data.filter(item => {
        return item.role === value
      })
      console.log(this.data)
    }, */
    handleclickdelete (row) {
      this.$confirm('此操作将删此用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let remove = async () => {
          try {
            await removeRoler(row.RolerId)
          } catch (err) {
            console.log(err)
          }
        } 
        remove()
        let index = this.list.findIndex(item => {
          return item === row
        })
        this.list.splice(index, 1)
        // this.list = this.data
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.dialogFormVisible = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    submitForm (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将上传此用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var test = /\s*/g
            let query = {
              number: this.form.number.replace(test, ''),
              name: this.form.name.replace(test, ''),
              password: this.form.password.replace(test, ''),
              role: this.form.role.replace(test, ''),
              phone: this.form.phone.replace(test, '')
            }
            let add = async () => {
              try {
                await addRoler(query)
              } catch (err) {
                console.log(err)
              }
            }
            add()
            this.list.push(query)
            // this.list = this.data
            this.form = {}
            this.$message({
              type: 'success',
              message: '上传成功!'
            })
            this.dialogFormVisible = false
            this.$refs[form].clearValidate()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消上传'
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.table {
    width: 95%;
    margin-left: 40px;
    margin-top: 20px;
}
.head {
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
</style>
